//自调用函数
(function () {
    // 1、页面一加载就要知道页面宽度计算
    var setFont = function () {
        // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
        var html = document.documentElement;// 获取html
        // 获取宽度
        var width = html.clientWidth;

        // 判断
        if (width < 1024) width = 1024
        if (width > 1920) width = 1920
        // 设置html的基准值
        var fontSize = width / 80 + 'px';
        // 设置给html
        html.style.fontSize = fontSize;
    }
    setFont();
    // 2、页面改变的时候也需要设置
    // 尺寸改变事件
    window.onresize = function () {
        setFont();
    }
})();

(function () {
    //事件委托
    $('.monitor').on('click', ' a', function () {
        //点击当前的a 加类名 active  他的兄弟删除类名
        $(this).addClass('active').siblings().removeClass('active');
        //获取一一对应的下标
        var index = $(this).index();
        //选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
        $('.content').eq(index).show().siblings('.content').hide();
    });
    //滚动
    //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
    //      然后动画向上滚动，滚动到一半重新开始滚动
    //因为选取的是两个marquee  所以要遍历
    $('.monitor .marquee').each(function (index, dom) {
        //将每个 的所有子级都复制一遍
        var rows = $(dom).children().clone();
        //再将新的到的加入原来的
        $(dom).append(rows);
    });

})();

//顶部数字
(function () {
  //跑数字
	start(94271 * 3,'h_xiaohao', 500);
	start(32704 * 3,'h_keyong', 500);
	start(10608 * 3,'h_zhengshi', 500);
    start(1449, 'h_jiamengshang', 1);
    //跑数字
    start(32011 * 3, 'h_studytotal', 1000);
    start(418 * 3, 'study_current', 100);
    //跑数字
    start(120899 * 3, 'h_cardcount', 500);
    start(248 * 3, 'h_monthcount', 100);   

    var cardXiaohaoTimer;
    clearInterval(cardXiaohaoTimer);
    cardXiaohaoTimer = setInterval(function ()
    {
        start(94271 * 3, 'h_xiaohao', 500);
        start(32704  * 3, 'h_keyong', 500);
        start(10608  * 3, 'h_zhengshi', 500);
        start(1449 , 'h_jiamengshang', 1);
        start(32011  * 3, 'h_studytotal', 1500);
        start(418  * 3, 'study_current', 100); 
        start(3923  * 3, 'h_cardcount', 100);
        start(248 * 3, 'h_monthcount', 100);
        start(1321  * 3, 'm_zhengshi', 200);
    }, 10000);
})();


(function () {
    var myechart = echarts.init($('.pie')[0]);
    var option = {
        // 控制提示
        //tooltip: {
            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
            //trigger: 'item',
            // 格式化提示内容：
            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
            //formatter: "{a} <br/>{b} : {c} ({d}%)"
        //},
        // 控制图表
        series: [
            {
                // 图表名称
                name: '地区',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 百分比基于  图表DOM容器的半径
                radius: ['10%','70%'],
                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                // 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: [
                    { value: 80  * 3, name: '小学' },
                    { value: 70  * 3, name: '初中' },
                    { value: 50  * 3, name: '高中' },
                    { value: 25  * 3, name: '大学' },
                    { value: 16  * 3, name: '成人' },
                    { value: 15  * 3, name: '出国考试' },
                    { value: 10  * 3, name: '常用英语' },
                    { value: 20  * 3, name: '行业英语' }
                ],
                //文字调整
                label: {
                    fontSize: 10
                },
                //引导线
                labelLine: {
                    length: 8,
                    length2: 10
                }
            }
        ],
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    myechart.setOption(option);
	
	//自动高亮饼图模块
	var app = {
     currentIndex: -1
    };

    var pieTimer;
    clearInterval(pieTimer);  
    pieTimer = setInterval(function () {
		 var dataLen = option.series[0].data.length;
		 // 取消之前高亮的图形
		 myechart.dispatchAction({
			 type: 'downplay',
			 seriesIndex: 0,
			 dataIndex: app.currentIndex
		 });
		 app.currentIndex = (app.currentIndex + 1) % dataLen;
		 // 高亮当前图形
		 myechart.dispatchAction({
			 type: 'highlight',
			 seriesIndex: 0,
			 dataIndex: app.currentIndex
		 });
		 // 显示 tooltip
		 myechart.dispatchAction({
			 type: 'showTip',
			 seriesIndex: 0,
			 dataIndex: app.currentIndex
		 });
		 
	 }, 3000);
})();
// 用户
(function () {
    // 中间省略的数据  准备三项
    var item = {
        name: '',
        value: 90,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        }
    };
    var option = {
        // 工具提示
        tooltip: {
            // 触发类型  经过轴触发axis  经过轴触发item
            trigger: 'item',
            // 轴触发提示才有效
            axisPointer: {
                // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
                type: 'shadow'
            }
        },
        // 图表边界控制
        grid: {
            // 距离 上右下左 的距离
            left: '0',
            right: '3%',
            bottom: '3%',
            top: '5%',
            // 大小是否包含文本【类似于boxsizing】
            containLabel: true,
            //显示边框
            show: false,
            //边框颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: ['鄄城直属分校1', '运城直属分校2', '曹县直属分校1', '汝城分校1', '滨海直属分校1',  '台前分校1', '石家庄市级直属分校1', '洪洞县直属分校1', '新沂分校1', '顺势智能英语6'],
                // 刻度设置
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                }
            }
        ],
        // 控制y轴
        yAxis: [
            {
                // 使用数据的值设为刻度文字
                type: 'value',
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                },
                splitLine: {
                    //lineStyle: {
                    //    color: 'rgba(0, 240, 255, 0.3)'
                    //}
                    show: false
                },
            }
        ],
        // 控制x轴
        series: [

            {
                // series配置
                // 颜色
                itemStyle: {
                    // 提供的工具函数生成渐变颜色
                    color: new echarts.graphic.LinearGradient(
                        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#00fffb' }, // 0 起始颜色
                            { offset: 1, color: '#0061ce' }  // 1 结束颜色
                        ]
                    ),
					 emphasis: {
                       itemStyle: {
                           color:'#333FFF'
                       }
                   }
                },
                // 图表数据名称
                name: '用户统计',
                // 图表类型
                type: 'bar',
                // 柱子宽度
                barWidth: '60%',
                // 数据
                data: [442  * 3, 233 * 3, 174 * 3, 147 * 3, 97 * 3,  84 * 3, 78 * 3, 78 * 3, 71 * 3, 70 * 3]
            }
        ]
    };
    var myechart = echarts.init($('.users .bar')[0]);
    myechart.setOption(option); 

    var chartTimer;
    clearInterval(chartTimer);
    chartTimer = setInterval(function () {
        myechart.clear();
        option.series[0].data.value = [442  * 3, 233 * 3, 174 * 3, 147 * 3, 97 * 3,  84 * 3, 78 * 3, 78 * 3, 71 * 3, 70 * 3];
        option.xAxis[0].data.value = ['鄄城直属分校1', '运城直属分校2', '曹县直属分校1', '汝城分校1', '滨海直属分校1',  '台前分校1', '石家庄市级直属分校1', '洪洞县直属分校1', '新沂分校1', '顺势智能英语6'];
        myechart.setOption(option);
    },10000);
})();

//订单
(function () {
    var data = {
        day365: { orders: '20301987', amount: '99834' },
        day90: { orders: '301987', amount: '9834' },
        day30: { orders: '7987', amount: '6834' },
        day1: { orders: '1987', amount: '1834' }
    }
    //点击事件
    $('.order').on('click', '.filter a', function () {
        //点击之后加类名
        $(this).addClass('active').siblings().removeClass('active');
        // 先获取点击a的 data-key自定义属性
        var key = $(this).attr('data-key');
        //获取自定义属性
        // data{}==>data.shuxing data['shuxing]
        key = data[key];//
        $('#h_ordercount').text(key.orders);
        $('#h_shenhe').text(key.amount);
    });
    //定时器
    var index = 0;
    var aclick = $('.order a');
    setInterval(function () {
        index++;
        if (index > 3) {
            index = 0;
        }
        //每san秒调用点击事件
        aclick.eq(index).click();
    }, 3000);
})();

//在线分时段统计
(function () {
	function reshdata(){
    var xdata = [];
    var ydata = [];
    var myDate = new Date(); 
    var hours = myDate.getHours();  
    for (var i = 1; i <= hours; i++) {
        xdata.push(i);
        if (i < 6)
            ydata.push(Math.random());
        else if (i >= 6 && i < 9)
            ydata.push(200 * i + 15);
        else if (i >= 9 && i < 12)
            ydata.push(100 * i - 10);
        else if (i >= 12 && i < 14)
            ydata.push(500 * i + 32);
        else if (i >= 14 && i < 17)
            ydata.push(50 * i + 5);
        else if (i >= 17 && i < 20)
            ydata.push(450 * i + 6);
        else if (i >= 20 && i < 23)
            ydata.push(30 * i - 76);
    }

    var option = {
        //鼠标提示工具
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            // 类目类型
            type: 'category',
            // x轴刻度文字
            data: xdata,
            axisTick: {
                show: false//去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'//文本颜色
            },
            axisLine: {
                show: false//去除轴线
            },
			splitLine:{
				show:false				
			},
            boundaryGap: false//去除轴内间距
        },
        yAxis: {
            // 数据作为刻度文字
            type: 'value',
            axisTick: {
                show: false//去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd',//文本颜色
                fontSize: 8
            },
            axisLine: {
                show: false//去除轴线
            },
			splitLine:{
				show:false				
			},
            boundaryGap: false//去除轴内间距
        },
        // 设置网格样式
        grid: {
            show: true,// 显示边框
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        series: [{
            name: '人数',
            // 数据
            data: ydata,
            // 图表类型
            type: 'line',
            // 圆滑连接
            smooth: true,
			showSymbol:false,
            itemStyle: {
                color: '#00f2f1'  // 线颜色
            }
        }]
    };
    var myechart = echarts.init($('.line')[0]);
	myechart.clear();
    myechart.setOption(option);	
	}
	
	//第一次加载
	 reshdata();
     //动态更新数据
    var lineTimer;
    clearInterval(lineTimer);
    lineTimer = setInterval(function () {
       reshdata();
    }, 15000)
})();


//CPU动态数据
(function () {
    var myChart = echarts.init($('.cpu')[0]);
    var item = {
        name: "  ",
        value: random(),
        unit: '%',
        max: 100
    };
   var option = {
        title: {
            text: item.value + item.unit,
            x: '45%',
            y: '35%',
            textAlign: "center",
            textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#ffffff'
            },
            subtext: item.name,
            subtextStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: '#ffffff',
                align: 'center'
            }
        },
        series: [{
            name: ' ',
            type: 'pie',
            radius: ['70%', '80%'],  // 放大图形
            center: ['50%', '50%'],    // 往下移动  套住75%文字
            startAngle: 225,
            color: [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0.4,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: "#00a2ff" // 0% 处的颜色
                }, {
                    offset: 1,
                    color: "#70ffac" // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }, 'none'],
            hoverAnimation: false,
            legendHoverLink: false,
            z: 10,
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 75 * item.value / 100
            }, {
                value: item.max - (75 * item.value / 100)
            }]
       }, {
           name: '',
           type: 'pie',
           radius: ['70%', '80%'],  // 放大图形
           center: ['50%', '50%'],    // 往下移动  套住75%文字
           startAngle: 225,
                color: ["#12274d"],
           z: 9,
           hoverAnimation: false,
           legendHoverLink: false,
           labelLine: {
               normal: {
                   show: false
            }
           },
           data: [{
               value: 75,
               itemStyle: {
                   normal: {
                       color: "#12274d"
                }
               }
           }, {
               value: 25
        }]
       }]
    };

    function random() {
        return (Math.random() * 50).toFixed(0);
    }

    //定时动态刷新
    var cpuTimer;
    clearInterval(cpuTimer);
    cpuTimer = setInterval(function () {
        var value = parseInt(Math.random() * 50);
        setPercent(value);
    }, 1000);

    function setPercent(p) {
        var value = random(),
            value_ = 75 * value / 100;
        option.title.text = value + "%";
        option.series[0].data[0].value = value_;
        option.series[0].data[1].value = 100 - value_;
        if (myChart == undefined) {
            myChart = echarts.init($('.cpu')[0]);
        }
        myChart.setOption(option);
    }
})();


(function () {
    var option = {
        series: [
            {
                type: 'pie',
                radius: ['130%', '150%'],  // 放大图形
                center: ['50%', '80%'],    // 往下移动  套住75%文字
                label: {
                    show: false,
                },
                startAngle: 180,
                hoverOffset: 0,  // 鼠标经过不变大
                data: [
                    {
                        value: 100,
                        itemStyle: { // 颜色渐变#00c9e0->#005fc1
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#00c9e0' },
                                    { offset: 1, color: '#005fc1' }
                                ]
                            }
                        }
                    },
                    { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d

                    { value: 200, itemStyle: { color: 'transparent' } }// 透明隐藏第三块区域
                ]
            }
        ]
    };
    var myechart = echarts.init($('.gauge')[0]);
    myechart.setOption(option);
	
    var realyTimer;
    clearInterval(realyTimer);
    realyTimer = setInterval(function () {
        myechart.clear();
        myechart.setOption(option);
    }, 8000);
})();
(function () {
    var mycpuechart = echarts.init($('.all_cpu')[0]);

    function randomData() {
        now = new Date(+now + oneDay);
        value = Math.abs( Math.random() * 100 - 10);
        var valueName = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() +
            ' ' + (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) + ':' +
            (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) +
            ':' + (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds());
        
        return {
            name: now.toString(),
            value: [
                valueName,
                Math.round(value)
            ]
        }
    }

    var data = [];
    var now = +new Date();
    var oneDay = 1000;
    var value = Math.random() * 100;
    for (var i = 0; i < 60; i++) {
        data.push(randomData());
    }

    var temp = 59;

    cpuoption = {
        animation: false,
        // 图表边界控制
        grid: {
            // 距离 上右下左 的距离
            left: '0',
            right: '3%',
            bottom: '3%',
            top: '5%',
            // 大小是否包含文本【类似于boxsizing】
            containLabel: true,
            //显示边框
            show: false,
            //边框颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: [{
			show:false,
            type: 'time',
            splitLine: {
                show: false
            },
            boundaryGap: false,
            // 刻度设置
            axisTick: {
                // true意思：图形在刻度中间
                // false意思：图形在刻度之间
                alignWithLabel: false,
                show: false
            },
            //文字
            axisLabel: {
                color: '#4c9bfd'
            }
        }],
        // 控制y轴
        yAxis: [
            {
                // 使用数据的值设为刻度文字
                type: 'value',
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                },
                splitLine: {
                    //lineStyle: {
                    //    color: 'rgba(0, 240, 255, 0.3)'
                    //}
                    show: false
                },
            }
        ],
        series: {
            type: 'line',
            symbol: 'none',
            tooltip: {
                trigger: 'axis'
                // formatter: '{a} <br/>{b}日: {c}元'
            },
            smooth: true,
            itemStyle: {
                normal: {
                    color: "#39B7CE"
                }
            },
            lineStyle: {
                normal: {
                    color: "#39B7CE"
                }
            },
            areaStyle: {
                normal: {
                    color: "#39B7CE",
                    opacity: 0.8
                }
            },
            markPoint: {
                data: [
                    [{
                        symbol: 'none',
                        x: '95%',
                        yAxis: data[temp].value[1]
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '实时数据\n{c}'
                            }
                        },
                        name: '实时数据',
                        value: data[temp].value[1],
                        xAxis: data[temp].value[0],
                        yAxis: data[temp].value[1]
                    }]
                ]
            },
            data: data
        }
    };

    var realTimer;
    clearInterval(realTimer);
    realTimer = setInterval(function () {
        for (var i = 0; i < 5; i++) {
            data.shift();
			var tempdata =randomData();
            data.push( tempdata> 80 ? 80 : tempdata);
        }          
        cpuoption.series.data.value = data;
        mycpuechart.setOption(cpuoption); 
    }, 1000);
})();



function roll(total, idname, step) {
		let n = 0;
		return function () {
			n = (n + step) >= total ? total : (n + step);
			if (n <= total) {
				document.getElementById(idname).innerHTML = RetainedDecimalPlaces(n,0);
			}
		}
	}
function start(index, idname, step, runtime = 1000){
	let rolling = roll(index, idname, step)
	let timer;
	runtime = (runtime >= 300) ? runtime : 1000;
    for (let i = 0; i < (index / step); i++) {
        timer = setTimeout(rolling, (runtime / index) * i * step)
    }
    clearTimeout(timer);
}


function RetainedDecimalPlaces(num, del) //值：num 小数位：del 
{
　　if (del != 0)
　　{
　　　　 num = parseFloat(num).toFixed(del); //天花板函数保留小数并四舍五入
　　 }
　　var source = String(num).split(".");//按小数点分成2部分
　　source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)', 'ig'), "$1,");//只将整数部分进行都好分割
　　return source.join(".");//再将小数部分合并进来
};

